<template>
  <div class="big-page">
    <page-header menu="EnergyManagement"></page-header>
    <div class="show-layout">
      <div class="pager pager-left" :class="{'hide': page===1}">
        <i class="el-icon-arrow-left" @click="prev"></i>
      </div>
      <div class="column">
        <div class="column-row">
          <div class="search-wrapper" v-if="page===1"></div>
          <div class="search-wrapper" v-if="page===2"></div>
          <div class="search-wrapper" v-if="page===3"></div>
          <div class="search-wrapper" v-if="page===4"></div>
          <div class="search-wrapper" v-if="page===5"></div>
          <div class="search-wrapper" v-if="page===6"></div>
          <common-chart :chart-type="'bar'" size="big" :data="chart1" v-if="page===1"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart2" v-if="page===2"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart3" v-if="page===3"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart4" v-if="page===4"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart5" v-if="page===5"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart6" v-if="page===6"></common-chart>
        </div>
      </div>
      <div class="pager pager-right" :class="{'hide': page===6}">
        <i class="el-icon-arrow-right" @click="next"></i>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'EnergyManagement',
  data () {
    return {
      page: 1,
      params: {
        type: 1
      },
      title: '能源管理',
      chart1: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'EnergyManagement', id: '321' },
        title: '用电总量',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      },
      chart2: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'EnergyManagement', id: '321' },
        title: '用电量同比',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      },
      chart3: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'EnergyManagement', id: '311' },
        title: '用水总量',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      },
      chart4: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'EnergyManagement', id: '311' },
        title: '用水量同比',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      },
      chart5: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'EnergyManagement', id: '331' },
        title: '供暖天然气',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      },
      chart6: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'EnergyManagement', id: '331' },
        title: '供暖天然气耗量同比变化',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      }
    }
  },
  components: {
    PageHeader,
    CommonChart
  },
  created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    toFirst () {
      setTimeout(() => {
        this.page = 1
        this.init()
      })
    },
    toDetail () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '3' } })
    },
    init () {
      if (this.page === 1) {
        this.getChart1()
      } else if (this.page === 2) {
        this.getChart2()
      } else if (this.page === 3) {
        this.getChart3()
      } else if (this.page === 4) {
        this.getChart4()
      } else if (this.page === 5) {
        this.getChart5()
      } else if (this.page === 6) {
        this.getChart6()
      }
    },
    prev () {
      const currentPage = this.page
      if (currentPage > 1) {
        this.page = null
        setTimeout(() => {
          this.page = currentPage - 1
          this.init()
        }, 200)
      }
    },
    next () {
      const page = this.page
      if (page < 6) {
        this.page = null
        setTimeout(() => {
          this.page = page + 1
          this.init()
        }, 200)
      }
    },
    async getChart1 () {
      const params = {
        type: 1
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        const legend = []
        records.forEach(item => {
          legend.push(item.xq)
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '16%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart1.series = series
        this.chart1.legend = legend
        this.chart1.xAxis = [
          { data: xAxisData }
        ]
      }
    },
    async getChart2 () {
      const params = {
        type: 2
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        const legend = []
        records.forEach(item => {
          legend.push(item.xq)
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '16%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart2.series = series
        this.chart2.legend = legend
        this.chart2.xAxis = [
          { data: xAxisData }
        ]
      }
    },
    async getChart3 () {
      const params = {
        type: 3
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        const legend = []
        records.forEach(item => {
          legend.push(item.xq)
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '16%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart3.series = series
        this.chart3.legend = legend
        this.chart3.xAxis = [
          { data: xAxisData }
        ]
      }
    },
    async getChart4 () {
      const params = {
        type: 4
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        const legend = []
        records.forEach(item => {
          legend.push(item.xq)
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '16%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart4.series = series
        this.chart4.legend = legend
        this.chart4.xAxis = [
          { data: xAxisData }
        ]
      }
    },
    async getChart5 () {
      const params = {
        type: 5
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        const legend = []
        records.forEach(item => {
          legend.push(item.xq)
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '16%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart5.series = series
        this.chart5.legend = legend
        this.chart5.xAxis = [
          { data: xAxisData }
        ]
      }
    },
    async getChart6 () {
      const params = {
        type: 6
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        const legend = []
        records.forEach(item => {
          legend.push(item.xq)
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '16%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart6.series = series
        this.chart6.legend = legend
        this.chart6.xAxis = [
          { data: xAxisData }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
